<template>
  <div class="data-screening">
    <div class="diagnosis">
      <div class="diagnosis-title">
        <h3>账号诊断</h3>
        <p>统计周期: 2023.05.22-2023.05.28 (每天10点更新)</p>
      </div>
      <div class="diagnosis-main">
        <div class="diagnosis-left">
          <ul>
            <li>
              <h4>投稿数</h4>
              <p>
                你的投稿数为{{ workDiagnosis.worksNum }},低于{{
                  workDiagnosis.worksExceed
                }}%的同类创作者|提升建议
              </p>
            </li>
            <li>
              <h4>视频播放量</h4>
              <p>
                你的作品播放量为{{ workDiagnosis.playNum }}，超过{{
                  workDiagnosis.playExceed
                }}%的同类创作者|提升建议
              </p>
            </li>

            <li>
              <h4>粉丝量</h4>
              <p>
                你的作品播放量为{{ workDiagnosis.fansNum }}，超过{{
                  workDiagnosis.fansExceed
                }}%的同类创作者|提升建议
              </p>
            </li>
            <li>
              <h4>收藏量</h4>
              <p>
                你的作品播放量为{{ workDiagnosis.collectNum }}，超过{{
                  workDiagnosis.collectExceed
                }}%的同类创作者|提升建议
              </p>
            </li>
            <li>
              <h4>作品点赞量</h4>
              <p>
                你的作品播放量为{{ workDiagnosis.likeNum }}，超过{{
                  workDiagnosis.likeExceed
                }}%的同类创作者|提升建议
              </p>
            </li>
          </ul>
        </div>
        <div class="diagnosis-right" id="rachart"></div>
      </div>
    </div>
    <div class="tendency">
      <div class="tendency-title">
        <h3>账号诊断</h3>
        <div class="tendency-title-right">
          <div class="tendency-limit-time">
            <p>时间选择</p>
            <span style="margin: 0 8px">|</span>
            <el-select
              v-model="tendencyTime"
              placeholder="请选择"
              @change="getCoreTendencyFun()"
              class="tendency-select"
            >
              <el-option
                v-for="item in options"
                :key="item.tendencyTime"
                :label="item.label"
                :value="item.tendencyTime"
              >
              </el-option>
            </el-select>
            <!-- <i
              class="el-icon-arrow-down"
              style="line-height: 15px; margin-left: 5px"
            ></i>
            <div class="limit-time">
              <ul>
                <li>昨日</li>
                <li>近7日</li>
                <li>近30日</li>
              </ul>
            </div> -->
          </div>
          <p class="tendency-time">统计周期: 2023.05.28 (每天10点更新)</p>
        </div>
      </div>
      <div>
        <div class="tendency-box">
          <ul>
            <li
              :class="[diagnosisActive == 1 ? 'tendency-box-active' : '']"
              @click="switchDiagmosisCart(1)"
            >
              <div>
                <span class="tendency-box-title">播放量</span
                ><span class="tendency-box-number">{{
                  coreTendency.incrPlayNum
                }}</span>
              </div>
              <p>{{ coreTendency.playNum }}</p>
            </li>
            <li
              :class="[diagnosisActive == 2 ? 'tendency-box-active' : '']"
              @click="switchDiagmosisCart(2)"
            >
              <div>
                <span class="tendency-box-title">主页访问量</span
                ><span class="tendency-box-number">{{
                  coreTendency.incrHomeVisitNum
                }}</span>
              </div>
              <p>{{ coreTendency.homeVisitNum }}</p>
            </li>
            <li
              :class="[diagnosisActive == 3 ? 'tendency-box-active' : '']"
              @click="switchDiagmosisCart(3)"
            >
              <div>
                <span class="tendency-box-title">作品点赞量</span
                ><span class="tendency-box-number">{{
                  coreTendency.incrWorksLikeNum
                }}</span>
              </div>
              <p>{{ coreTendency.worksLikeNum }}</p>
            </li>
            <li
              :class="[diagnosisActive == 4 ? 'tendency-box-active' : '']"
              @click="switchDiagmosisCart(4)"
            >
              <div>
                <span class="tendency-box-title">作品评论量</span
                ><span class="tendency-box-number">{{
                  coreTendency.incrWorksCommentNum
                }}</span>
              </div>
              <p>{{ coreTendency.worksCommentNum }}</p>
            </li>
            <li
              :class="[diagnosisActive == 5 ? 'tendency-box-active' : '']"
              @click="switchDiagmosisCart(5)"
            >
              <div>
                <span class="tendency-box-title">作品收藏量</span
                ><span class="tendency-box-number">{{
                  coreTendency.incrWorksCollectNum
                }}</span>
              </div>
              <p>{{ coreTendency.worksCollectNum }}</p>
            </li>
            <li
              :class="[diagnosisActive == 6 ? 'tendency-box-active' : '']"
              @click="switchDiagmosisCart(6)"
            >
              <div>
                <span class="tendency-box-title">净增粉丝量</span
                ><span class="tendency-box-number">{{
                  coreTendency.incrFansNum
                }}</span>
              </div>
              <p>{{ coreTendency.fansNum }}</p>
            </li>
          </ul>
        </div>
        <div class="tendency-chart" id="brokenchart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkDiagnosisApi, getCoreTendencyApi } from "@/api/diagnosis";
import * as echarts from "echarts";
export default {
  name: "dataScreening",
  data() {
    return {
      options: [
        {
          tendencyTime: 1,
          label: "昨天",
        },
        {
          tendencyTime: 7,
          label: "近7日",
        },
        {
          tendencyTime: 30,
          label: "近30日",
        },
      ],
      tendencyTime: 1,
      personalData: [],
      diagnosisData: [],
      filedType: 1,
      workDiagnosis: {},
      diagnosisActive: 1,
      coreTendency: {},
      worksTime: [],
      worksNumber: [],
      otherWorksNum: "",
      otherPlayNum: "",
      otherFansNum: "",
      otherCollectNum: "",
      otherLikeNum: "",
      userInfo: this.$store.state.userInfo,
    };
  },
  created() {
    this.getWorkDiagnosisFun();
    this.getCoreTendencyFun();
  },
  mounted() {
    this.radarEcharts();
    this.brokenEcharts();
  },
  methods: {
    getWorkDiagnosisFun() {
      getWorkDiagnosisApi().then((res) => {
        if (res.data.code == 200) {
          this.workDiagnosis = res.data.data;
          this.diagnosisData.push(res.data.data.otherWorksNum);
          this.diagnosisData.push(res.data.data.otherPlayNum);
          this.diagnosisData.push(res.data.data.otherFansNum);
          this.diagnosisData.push(res.data.data.otherCollectNum);
          this.diagnosisData.push(res.data.data.otherLikeNum);
          this.personalData.push(res.data.data.worksNum);
          this.personalData.push(res.data.data.playNum);
          this.personalData.push(res.data.data.fansNum);
          this.personalData.push(res.data.data.collectNum);
          this.personalData.push(res.data.data.likeNum);
          this.radarEcharts();
        }
      });
    },
    getCoreTendencyFun() {
      getCoreTendencyApi({
        userId: this.userInfo.userId,
        period: this.tendencyTime,
        filedType: this.filedType,
      }).then((res) => {
        if (res.data.code == 200) {
          this.coreTendency = res.data.data;
          this.worksTime = res.data.data.twoWeekFiledWorksMap.date;
          this.worksNumber = res.data.data.twoWeekFiledWorksMap.wv;
          this.brokenEcharts();
        }
      });
    },
    switchDiagmosisCart(idx) {
      this.diagnosisActive = idx;
      // 发送请求数据
    },
    brokenEcharts() {
      var chartDom = document.getElementById("brokenchart");
      var myChart = echarts.init(chartDom);
      const option = {
        xAxis: {
          type: "category",
          data: this.worksTime,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.worksNumber,
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    radarEcharts() {
      var chartDom = document.getElementById("rachart");
      var myChart = echarts.init(chartDom);
      const option = {
        legend: {
          bottom: 5,
        },
        radar: {
          indicator: [
            { name: "投稿数", max: 500 },
            { name: "播放量", max: 600 },
            { name: "粉丝量", max: 300 },
            { name: "收藏量", max: 380 },
            { name: "点赞量", max: 520 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: this.diagnosisData,
                name: "全部用户",
              },
              {
                value: this.personalData,
                name: "个人",
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.data-screening {
  width: 96%;
  margin: auto;
  padding-bottom: 20px;
}
.diagnosis,
.tendency {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}
.tendency {
  margin-top: 15px;
}
.diagnosis-title,
.tendency-title {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
}
.diagnosis-title p,
.tendency-time {
  font-size: 12px;
  color: #ababab;
}
.diagnosis-left {
  width: 65%;
}
.diagnosis-left ul li {
  height: 70px;
  padding: 10px 0;
  line-height: 1.5;
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
}
.diagnosis-main {
  display: flex;
  margin-top: 10px;
}
.diagnosis-right {
  width: 32%;
  margin-left: 20px;
  background: #f7f9fb;
  border-radius: 10px;
}
.tendency-chart {
  height: 350px;
  margin-top: 20px;
  border-radius: 10px;
  width: 100%;
  background: #f7f9fb;
}
.tendency-box {
  width: 100%;
}
.tendency-box ul {
  display: flex;
  justify-content: space-between;
}
.tendency-box ul li {
  cursor: pointer;
  width: 15%;
  height: 70px;
  background: #f7f9fb;
  padding: 10px 12px;
  box-sizing: border-box;
  line-height: 1.8;
  border-radius: 8px;
}
.tendency-box-active {
  background: #ff496d !important;
  color: #fff !important;
}
.tendency-box ul li > div {
  justify-content: space-between;
  display: flex;
}
.tendency-box-title {
  /* color: #ababab; */
  font-size: 12px;
}
.tendency-box-number {
  font-weight: 600;
  font-size: 12px;
}
.tendency-limit-time {
  position: relative;
  display: flex;
  height: 20px;
  color: #6c6c6c;
  line-height: 15px;
  font-size: 13px;
  /* width: 120px; */
  cursor: pointer;
  margin-left: auto;
}
.tendency-limit-time:hover .limit-time {
  display: block;
}
.limit-time {
  position: absolute;
  top: 18px;
  width: 80px;
  right: 10px;
  display: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: 1px 2px 6px #e7e7e7;
}
.limit-time ul li {
  padding: 10px 18px;
  box-sizing: border-box;
  height: 38px;
}
.limit-time ul li:hover {
  background: #f2f2f4;
}

.tendency-select .el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  transition: all 0.3s;
  line-height: 18px;
}
.tendency-select .el-input__inner {
  border: none;
  height: 18px;
  line-height: 18px;
  padding: 0;
  width: 75px;
}
</style>
